<template>
	<div class="adm-page" :class="skin" :style="{backgroundImage: 'url(' + bg + ')'}">
		<Head @getData="getData" />
		<div class="adm-panel">
			<div class="adm-panel-hd">
				<div class="index-hd">
					<router-link to="/">
						<i class="iconfont icon-home"></i>
					</router-link>
				</div>
				<el-tabs v-model="editableTabsValue" type="card" closable>
					<el-tab-pane :key="item.name" v-for="item in editableTabs" :label="item.title" :name="item.name"></el-tab-pane>
				</el-tabs>
			</div>
			<div class="adm-panel-body ">
				<el-container class="el-container-scroll">
					<el-aside class="adm-side" width="180px">
						<div class="el-line-heading">
							<el-button><span class="iconfont icon-tiaocha"></span><span class="txt">案件总览</span></el-button>
						</div>
						<div class="scroll ht6">
						<el-menu class="el-icon-menu" default-active="1">
							<el-menu-item index="1"><span class="iconfont icon-erjitubiao-"></span><span>受案</span></el-menu-item>
							<el-menu-item index="2"><span class="iconfont icon-hh"></span><span>回避</span></el-menu-item>
							<el-menu-item index="3"><span class="iconfont icon-xunwen"></span><span>询问</span></el-menu-item>
							<el-menu-item index="4"><span class="iconfont icon-tiaocha"></span><span>调查</span></el-menu-item>
							<el-menu-item index="5"><span class="iconfont icon-anjian1"></span><span>吸毒案件办理</span></el-menu-item>
							<el-menu-item index="6"><span class="iconfont icon-hangzhengchufa"></span><span>行政处罚</span></el-menu-item>
							<el-menu-item index="7"><span class="iconfont icon-wupin1"></span><span>涉案物品处理</span></el-menu-item>
							<el-menu-item index="8"><span class="iconfont icon-wenshu"></span><span>执行类文书</span></el-menu-item>
							<el-menu-item index="9"><span class="iconfont icon-mingling"></span><span>责令处理</span></el-menu-item>
							<el-menu-item index="10"><span class="iconfont icon-churujing"></span><span>出入境类文书</span></el-menu-item>
							<el-menu-item index="11"><span class="iconfont icon-anjian"></span><span>案件终结</span></el-menu-item>
							<el-menu-item index="12"><span class="iconfont icon-qita"></span><span>其他</span></el-menu-item>
						</el-menu>
						</div>
					</el-aside>
					<el-container>
						<div class="adm-panel-group">
							<div class="adm-notice">
								<span class="iconfont icon-gonggao"></span><span class="cont">调查案件处理调查案件处理调查案件处理调查案件处理调查案件处理</span>
							</div>
							<div class="adm-cats">
								<ul class="adm-cats-list clear">
									<li>
										<div class="adm-tag">
											<span class="iconfont icon-tiaocha"></span><span class="txt">案件</span>
										</div>
									</li>
									<li>
										<div class="adm-tag adm-tag-success">
											<span class="iconfont icon-xianyiren"></span><span class="txt">嫌疑人</span>
										</div>
									</li>
									<li>
										<div class="adm-tag adm-tag-danger">
											<span class="iconfont icon-xianyirenbeihairen"></span><span class="txt">被害人</span>
										</div>
									</li>
									<li>
										<div class="adm-tag adm-tag-waring">
											<span class="iconfont icon-renyuan"></span><span class="txt">其他相关人员</span>
										</div>
									</li>
									<li>
										<div class="adm-tag ">
											<span class="iconfont icon-danwei"></span><span class="txt">单位</span>
										</div>
									</li>
									<li>
										<div class="adm-tag adm-tag-waring">
											<span class="iconfont icon-wupin"></span><span class="txt">礼品</span>
										</div>
									</li>
								</ul>
							</div>
							<el-row :gutter="20">
								<el-col :span="12">
									<div class="t-panel ">
										<div class="h-panel-hd">
											<div class="h-tit">嫌疑人人员文书列表</div>
										</div>
										<div class="h-panel-bd scroll ht3">
											<el-table :data="tableData" class="file-table" style="width: 100%" stripe>
												<el-table-column prop="id" label="序号" width="50">
												</el-table-column>
												<el-table-column show-overflow-tooltip="" prop="name" label="法律文件名称" >
												</el-table-column>
												<el-table-column prop="time" label="填发日期" width="100">
												</el-table-column>
												<el-table-column  label="操作" width="150">
													<template slot-scope="scope">
														<div class="btn-action">
															<el-button @click="handleClick(scope.row)" type="primary" size="small"><i class="iconfont icon-font03"></i>查看</el-button>
															<el-button type="success" size="small"><i class="iconfont icon-dayin"></i>打印</el-button>
														</div>
													</template>
												</el-table-column>
											</el-table>
										</div>
									</div>
								</el-col>
								<el-col :span="12">
									<div class="t-panel ">
										<div class="h-panel-hd">
											<div class="h-tit">其他文书列表</div>
										</div>
										<div class="h-panel-bd scroll ht3">
											<el-table :data="tableData" class="file-table" style="width: 100%" stripe>
												<el-table-column prop="id" label="序号" width="50">
												</el-table-column>
												<el-table-column show-overflow-tooltip="" prop="name" label="法律文件名称" >
												</el-table-column>
												<el-table-column prop="time" label="填发日期" width="100">
												</el-table-column>
												<el-table-column  label="操作" width="150">
													<template slot-scope="scope">
														<div class="btn-action">
															<el-button @click="handleClick(scope.row)" type="primary" size="small"><i class="iconfont icon-font03"></i>查看</el-button>
															<el-button type="success" size="small"><i class="iconfont icon-dayin"></i>打印</el-button>
														</div>
													</template>
												</el-table-column>
											</el-table>
										</div>
									</div>
								</el-col>
							</el-row>
						</div>
					</el-container>
				</el-container>
			</div>
		</div>
	</div>
</template>

<script>
	// @ is an alias to /src
	import Head from '@/components/Head.vue'
	export default {
		name: 'Home',
		components: {
			Head
		},
		data() {
			return {
				imageUrl: '',
				imageUrl2: '',
				editableTabsValue: '2',
				editableTabs: [{
					title: '行政案件列表',
					name: '1',
				}, {
					title: '行政案件处理',
					name: '2',
				}],
				tabIndex: 1,
				tableData:[
					{
						id: '1',
						time: '2021-05-02',
						name: '文书名称内容内容内容内容内容',
					},{
						id: '1',
						time: '2021-05-02',
						name: '文书名称内容内容内容内容内容',
					},{
						id: '1',
						time: '2021-05-02',
						name: '文书名称内容内容内容内容内容',
					},{
						id: '1',
						time: '2021-05-02',
						name: '文书名称内容内容内容内容内容',
					},{
						id: '1',
						time: '2021-05-02',
						name: '文书名称内容内容内容内容内容',
					},{
						id: '1',
						time: '2021-05-02',
						name: '文书名称内容内容内容内容内容',
					},
					{
						id: '1',
						time: '2021-05-02',
						name: '文书名称内容内容内容内容内容',
					},
					{
						id: '1',
						time: '2021-05-02',
						name: '文书名称内容内容内容内容内容',
					}
				],
				bg:require('../../assets/images/bg.jpg'),
				skin:"skin1"
			}

		},
		methods: {
			handleChange(file, fileList) {
				this.imageUrl = URL.createObjectURL(file.raw);
				console.log(fileList)
			},
			handleChange2(file, fileList) {
				this.imageUrl2 = URL.createObjectURL(file.raw);
				console.log(fileList)
			},
			getData(data) {
				console.log(data)
				if(data ==1){
					this.bg = require('../../assets/images/bg.jpg')
					this.skin = "skin1"
				}else if(data == 2){
					this.skin = "skin2"
					this.bg = require('../../assets/images/bg3.png')
				}else{
					this.skin = "skin3"
					this.bg = require('../../assets/images/bg2.png')
				}
			}
		}
	}
</script>
